<template>
	<view class="main">
		<u-navbar :is-back="true" title="我的课程" :background="background" :border-bottom="false" title-color="#000000"
			back-icon-color="#000"></u-navbar>
		<view class="all">
			<view class="videoes">
				<view class="covers" v-show="!videomoudle">
					<view class="back">
						<image :src="cover==''?first.cover:cover"></image>
					</view>
					<view class="play" @click="plays">
						<image src="../../../static/images/bofang.png" mode=""></image>
					</view>
				</view>
				<video id="myVideo" style="width: 750rpx; height: 400rpx;"  v-show="videomoudle"
					:src="videourl==''?first.video:videourl" enable-danmu page-gesture
					:controls="true"  show-fullscreen-btn 
					show-play-btn enable-progress-gesture show-mute-btn 
					:show-center-play-btn="false" @play="play" @timeupdate="videoTimeUpdateEvent"
					@loadedmetadata="loadedmetadata"></video>
			</view>
			<view class="content">
				<view class="title">
					{{videotit==''?first.title:videotit}}
				</view>
				<view class="cont_bot">
					<view class="tutor">
						讲师：{{teacher==''?first.lecturer:teacher}}
					</view>
					<view class="topic" @click="showtest">
						测试题目
					</view>
				</view>
			</view>
			<view class="tabs">
				<view class="tab">
					<view :class="ide==1?'tabconted':'tabcont'" @click="changetab(1)">
						<text>目录 ({{info.count}}）</text>
						<view class="xian"></view>
					</view>
					<view class="borl">

					</view>
					<view :class="ide==2?'tabconted':'tabcont'" @click="changetab(2)">
						<text>详情</text>
						<view class="xian"></view>
					</view>
				</view>
			</view>
			<block v-if="ide==1">
				<view class="contents" v-for="(item,index) in classlist" :key="index" @click="changevideo(item)">
					<view class="contents_l">
						<view class="video_tit">
							{{item.title}}
						</view>
						<view class="video_cont">
							<text>已学：{{item.percentage==null?'0':item.percentage}}%</text>
							<view>
								测试分数：<text>{{item.fs}}分</text>
							</view>
						</view>
					</view>
					<image src="../../../static/images/start.png" mode=""></image>
				</view>
			</block>
			<block v-if="ide==2">
				<view class="details">
					<u-parse :html="content==''?first.details:content"></u-parse>
				</view>
			</block>
		</view>
		<u-popup v-model="tests" mode="center" border-radius="40" width="700">
			<view class="score">
				<view class="testid" v-for="(item,index) in errlist" :key="index" @click="router(item.id)">
					{{'第'+(index+1)+'次测试'}}
				</view>
				<view class="isnone" v-if="errlist.length<1">
					暂无测试数据
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#FFFFFF',
				},
				videomoudle:false,
				tests: false,
				videotit: '',
				teacher: '',
				videourl: '',
				url: '',
				status: true,
				videoContext: '',
				ide: 1,
				tablist: ['商品信息', '商品属性'],
				videoContext: {}, // 用于绑定视频标签
				classlist: [],
				fatherid: '',
				info: '',
				content: '',
				currentTime: 0,
				videoid: '',
				videowidth: '',
				level: '',
				errlist: [],
				first:'',
				cover:''
			}
		},
		onShow() {
			this.getlevel()
			this.geterror(this.videoid)
		},
		onLoad(options) {
			// console.log( JSON.parse(decodeURIComponent(options.lesson)));
			this.info = JSON.parse(decodeURIComponent(options.info))
			// console.log(this.info);
			this.fatherid = options.id
			this.getclass()
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		onUnload() {
			if (this.videoid == '') {
				this.videoid = this.classlist[0].id
			}
 		if(this.videowidth!=0){ 
			global.$http.request({
				url: '/api/home/suspend',
				data: {
					token: uni.getStorageSync('token'),
					id: this.videoid,
					seconds: this.currentTime,
					percentage: this.videowidth
				}
			}).then(res => {
				if (res.data.code == 200) {
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 700
					})
				}
			})
		}
		},
		methods: {
			plays(){
				console.log();
				this.videomoudle=true
				this.videoContext.play()
			},
			showtest() {
				this.tests = true
				this.geterror(this.videoid)
			},
			geterror(id) {
				global.$http.request({
					url: '/api/User/wrong',
					data: {
						token: uni.getStorageSync('token'),
						zjid: id
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.errlist = res.data.data
					}
				})
			},
			//权限
			getlevel() {
				global.$http.request({
					url: '/api/User/info',
					data: {
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						// console.log(res);
						this.level = res.data.data[0]
					}
				})
			},
			loadedmetadata(e) { //无效果m
				console.log("loadedmetadata", e.detail.duration)
				this.videowidth = e.detail.duration
			},
			changevideo(info) {
				console.log(info);
				this.videoid = info.id
				uni.showLoading({
					title: '加载中'
				});
				var that = this
				setTimeout(function() {
					that.videotit = info.title
					that.videourl = info.video
					that.teacher = info.lecturer
					that.content = info.details
					this.cover=info.cover
					uni.hideLoading();
				}, 1000);

			},
			getclass() {
				global.$http.request({
					url: '/api/home/curriculum',
					data: {
						token: uni.getStorageSync('token'),
						id: this.fatherid
					}
				}).then(res => {
					if (res.data.code == 200) {

						this.classlist = res.data.data.data
						this.first=res.data.data.data[0]
						this.videoid = this.classlist[0].id
					}
				})
			},
			videoTimeUpdateEvent(e) { // 播放进度改变
				// e.detail.currentTime为每次触发时,视频的当前播放时间
				this.currentTime = Number(e.detail.currentTime);
				this.videowidth = Number(e.detail.duration)
			
			},
			play() {
				// this.videoContext.seek(parseInt(30.0)) //修改视频开始时间
				if (this.videoid == '') {
					this.videoid = this.classlist[0].id
				}
				for (let i = 0; i < this.classlist.length; i++) {
					if (this.videoid == this.classlist[i].id) {
						console.log(this.classlist[i]);
						if (this.classlist[i].percentage == 100) {
							this.videoContext.seek(0)
						} else {
							this.videoContext.seek(parseInt(this.classlist[i].play))
						}
						console.log('此视频从这里开始');
						break
					}
				}
			},


			router(id) {
				this.tests = false
				uni.navigateTo({
					url: '../errortest/errortest?id=' + id
				})
			},
			changetab(index) {
				this.ide = index
				console.log(this.ide);
			},
	

			/* 	start() {
					this.status = false
						this.videoContext.play()
				},
				pause(){
					this.status = true
						this.videoContext.pause()
				} */



		}
	}
</script>

<style lang="scss">
	page {
		width: 750rpx;
		height: 100%;
		font-family: PingFang SC;
		background-color: #F7F7F7;

		.main {
			.all {
				.videoes {
				
					.covers {
						position: relative;
				
						.back {
							image {
								width: 750rpx;
								height: 400rpx;
							}
						}
				
						.play {
							position: absolute;
							top: 102rpx;
							left: 305rpx;
				
							image {
								width: 140rpx;
								height: 140rpx;
							}
						}
				
				
					}
				
				}
				.content {
					background-color: #fff;
					padding: 34rpx 31rpx 0 31rpx;

					.title {
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #000000;
					}

					.cont_bot {
						padding: 29rpx 0 38rpx 0;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.tutor {
							height: 36rpx;
							padding: 0 17rpx;
							line-height: 36rpx;
							background: #FFFFFF;
							border: 2rpx solid #FF5850;
							border-radius: 6rpx;
							font-size: 22rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FF5850;
						}

						.topic {
							width: 140rpx;
							height: 52rpx;
							background: #11D1A8;
							border-radius: 26rpx;

							font-size: 24rpx;
							font-family: PingFang SC;
							text-align: center;
							line-height: 52rpx;
							font-weight: 400;
							color: #FFFFFF;
						}
					}

				}

				.tabs {
					border-top: 2rpx solid #F7F7F7;
					border-bottom: 2rpx solid #F7F7F7;
					width: 750rpx;
					display: flex;
					align-items: center;
					background-color: #fff;
					height: 88rpx;
					font-size: 30rpx;

					.tab {
						// width: 249rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.tabcont {
							width: 375rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;
							position: relative;
							color: #999999;

						}

						.tabconted {
							width: 375rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;
							position: relative;
							color: #000000;

							.xian {
								width: 40rpx;
								height: 4rpx;
								background: #11D1A8;
								position: absolute;
								top: 57rpx;
							}
						}

						.borl {
							width: 2rpx;
							height: 36rpx;
							background: #CCCCCC;
						}
					}
				}

				.contents {
					padding: 39rpx 33rpx;
					display: flex;
					background-color: #fff;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #F7F7F7;

					.contents_l {

						.video_tit {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						.video_cont {
							width: 625rpx;
							display: flex;
							justify-content: space-between;
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #9A9A9A;
							padding: 21rpx;

							view {
								text {
									font-size: 22rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #FF0000;
								}
							}
						}

					}

					image {
						width: 52rpx;
						height: 52rpx;
					}
				}

				.details {
					margin-top: 10rpx;
					width: 750rpx;

				}
			}

			.score {
				width: 720rpx;
				padding: 40rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				

				.isnone {
					text-align: center;
				}

				.testid {
					margin: 0 20rpx 30rpx 0;
					padding: 0 12rpx;
					height: 64rpx;
					line-height: 64rpx;
					background: #11D1A8;
					border-radius: 32rpx;

					text-align: center;
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
